<template>
    <div>

            <el-row>
                <!-- 上面空白的部分 -->
                <el-col :xs="24" :md="24" :sm="24" :lg="24"
                    ><div class="grid-content index-top"></div
                ></el-col>
            </el-row>

            <!-- 中间的部分 -->
            <el-row>
                <!-- 左边 -->
                <el-col :xs="2" :md="9" :sm="4"
                    ><div class="grid-content"></div
                ></el-col>
                <!-- 内容部分 -->
                <el-col :xs="20" :md="6" :sm="16"
                    ><div class="grid-content index-middle">
                        <el-col :xs="24" :md="24"
                            ><div class="index-middle-top">
                                <el-col :xs="6" :md="6" :sm="6"
                                    ><div
                                        v-bind:class="{
                                            selecton: current == 1,
                                        }"
                                        class="grid-content menu-item"
                                        @click="clickmenu(1)"
                                    >
                                        首页
                                    </div></el-col
                                >
                                <el-col :xs="6" :md="6" :sm="6"
                                    ><div
                                        v-bind:class="{
                                            selecton: current == 2,
                                        }"
                                        class="grid-content menu-item"
                                        @click="clickmenu(2)"
                                    >
                                        关于
                                    </div></el-col
                                >
                                <el-col :xs="6" :md="6" :sm="6"
                                    ><div
                                        v-bind:class="{
                                            selecton: current == 3,
                                        }"
                                        class="grid-content menu-item"
                                        @click="clickmenu(3)"
                                    >
                                        博客
                                    </div></el-col
                                >
                                <el-col :xs="6" :md="6" :sm="6"
                                    ><div
                                        v-bind:class="{
                                            selecton: current == 4,
                                        }"
                                        class="grid-content menu-item"
                                        @click="clickmenu(4)"
                                    >
                                        站点
                                    </div></el-col
                                >
                            </div></el-col
                        >

                        <transition name="el-zoom-in-top">
                        <el-col :xs="24" :md="24" v-show="show2">
                            <!-- 首页 -->
                            <div
                                class="grid-content index-middle-buttom"
                                v-if="current == 1"
                            >
                                <div class="index-shadow">
                                    <el-col
                                        :xs="24"
                                        :md="24"
                                        class="index-content-bottom"
                                        ><div class="index-bg">
                                            <img src="erfan.png" alt="头像"/></div
                                    ></el-col>
                                    <el-col
                                        :xs="24"
                                        :md="24"
                                        class="index-content-bottom"
                                        ><div class="index-bg-context">
                                            <h3 class="transitionTextBg">二饭的博客</h3>
                                            <el-col
                                                :xs="24"
                                                :md="24"
                                                class="contact-main"
                                            >
                                                <el-col
                                                    :span="6"
                                                    :md="6"
                                                    class="contact-item"
                                                >
                                                    <a
                                                        target="_blank"
                                                        href="mailto:tworice@sina.cn"
                                                    >
                                                        <div
                                                            class="contact-icon"
                                                        >
                                                            <img
                                                                src="img/email.png"
                                                                alt="邮箱"
                                                                class="
                                                                    contact-img
                                                                "
                                                            />
                                                        </div>
                                                    </a>
                                                </el-col>
                                                <el-col
                                                    :span="6"
                                                    :md="6"
                                                    class="contact-item"
                                                >
                                                    <a
                                                        target="_blank"
                                                        href="https://blog.csdn.net/Stand_Fast"
                                                    >
                                                        <div
                                                            class="contact-icon"
                                                        >
                                                            <img
                                                                src="img/csdn.png"
                                                                alt="CSDN"
                                                                class="
                                                                    contact-img
                                                                "
                                                            />
                                                        </div>
                                                    </a>
                                                </el-col>
                                                <el-col
                                                    :span="6"
                                                    :md="6"
                                                    class="contact-item"
                                                >
                                                    <div
                                                        class="contact-icon"
                                                        @click="onWechat()"
                                                    >
                                                        <img
                                                            src="img/wecat.png"
                                                            alt="微信"
                                                            class="contact-img"
                                                        />
                                                    </div>
                                                </el-col>
                                                <el-col
                                                    :span="6"
                                                    :md="6"
                                                    class="contact-item"
                                                >
                                                    <a
                                                        target="_blank"
                                                        href="http://wpa.qq.com/msgrd?v=3&uin=1786705138&site=qq&menu=yes"
                                                    >
                                                        <div
                                                            class="contact-icon"
                                                        >
                                                            <img
                                                                src="img/qq.png"
                                                                alt="QQ"
                                                                class="
                                                                    contact-img
                                                                "
                                                            />
                                                        </div>
                                                    </a>
                                                </el-col>
                                            </el-col></div
                                    ></el-col>
                                </div>
                            </div>

                            <!-- 关于 -->
                            <div
                                class="grid-content index-middle-buttom"
                                v-if="current == 2"
                            >
                                <div class="index-shadow index-roll">
                                    <div class="index-about-text">
                                        <p>二饭的博客</p>

                                        <p>前端采用Vue + ElementUI + Nginx</p>

                                        <p>后端：<br/>
                                            <span class="index-about-span" v-for="(item,index) in about.server" :key="index">{{item}}<br/></span>
                                        <p>如果您有对我的建议，可以点<span class="index-about-message" @click="onletter()">这里</span>给我留言。</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 博客 -->
                            <div class="grid-content index-middle-buttom" v-if="current == 3">
                                <div class="index-shadow index-roll" v-loading="blog_loading">
                                    <div class="index-timeline">
                                        <el-timeline>
                                            <el-timeline-item v-for="(i,index) in blogList" :key="index" :timestamp="i.date" placement="top">
                                                <a :href="i.address" target="_blank">
                                                    <el-card>
                                                        <h4>{{i.title}}</h4>
                                                        <p>{{i.writer}}发布于{{i.date}}</p>
                                                    </el-card>
                                                </a>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                </div>
                            </div>

                            <!-- 站点 -->
                            <div class="grid-content index-middle-buttom" v-if="current == 4" >
                                <div class="index-shadow">
                                    <el-col :xs="24" :md="24" class="contact-main" >
                                        <el-col :xs="6" :md="6" class="contact-item" v-for="(item,index) in sites" :key="index">
                                            <div class="contact-icon" @click="item.click" >
                                                <img :src="item.img" :alt="item.alt" class="contact-img " />
                                            </div>
                                            <p>{{item.name}}</p>
                                        </el-col>
                                    </el-col>
                                </div>
                            </div>
                        </el-col>
                        </transition>
                    </div>
                </el-col>
                <!-- 右边 -->
                <el-col :xs="2" :md="9" :sm="4">
                    <div class="grid-content">
                    </div>
                </el-col>
            </el-row>
            
            <!-- 下面部分 -->
            <el-row>
                <el-col :xs="24" :md="24">
                    <div class="grid-content index-bottom">
                        <p>
                            <b>&copy; 2020-2021 tworice.cn 版权所有 
                                <a href="https://beian.miit.gov.cn/" target="_blank"> <img src="img/emblem.png"/> 晋ICP备2021006611号-1</a>
                            </b>
                        </p>
                        <p>
                            <b>IP-<span>{{$parent.ip}}</span></b>
                        </p>
                        
                    </div>
                </el-col>
            </el-row>
    </div>
</template>














<script>
export default {
      props: [],
      data() {
            return {
                  isBlog:false,
                  blog_loading:true,
                  current: 1,
                  show2: false,  // 菜单下面展出部分是否显示
                  about:{
                  server:[
                        "服务框架 - SpringBoot",
                        "ORM框架 - MyBatis",
                        "接口文档 - Swagger",
                        "消息队列 - RabbitMQ",
                        "文件系统 - FastDFS",
                        "缓存 - Redis",
                        "存储 - MySQL/Redis",
                        "通信 - WebSocket",
                        "二维码 - zxing"
                  ]
                  },
                  sites:[
                        {
                              name:'文件系统',
                              img:'img/files.png',
                              click:this.onfile,
                              alt:'文件系统'
                        },{
                              name:'音乐播放器',
                              img:'img/music.png',
                              click:this.onmusic,
                              alt:'音乐播放器'
                        },{
                              name:'抖音解析',
                              img:'img/douyin.png',
                              click:this.ontiktok,
                              alt:'抖音解析'
                        },{
                              name:'管理系统',
                              img:'img/admin.png',
                              click:this.onAdmin,
                              alt:'管理系统'
                        },{
                              name:'二维码工具',
                              img:'img/QRCode.png',
                              click:this.onQRCode,
                              alt:'二维码工具'
                        },{
                              name:'校园一键签到',
                              img:'img/Q.png',
                              click:this.onQSchool,
                              alt:'校园一键签到'
                        },{
                              name:'浏览器导航页',
                              img:'img/llq.png',
                              click:this.onBrowser,
                              alt:'浏览器导航页'
                        },{
                              name:'Color代码转换',
                              img:'img/color.png',
                              click:this.onColor,
                              alt:'Color'
                        }
                  ],
                  blogList:[]
            };
      },
      methods: {
            // 菜单切换
            clickmenu(menu) {
                  this.show2=false;
                  setTimeout(() => {
                  this.current = menu;
                  this.show2=true;
                  }, 300);

                  // 判断是否需要加载博客
                  if(menu==3){
                  if(this.isBlog){
                        this.blog_loading=false
                  }else{
                        this.getBlogList();
                  }
                  }
            },
            onWechat() {
                  this.$message({
                  message: "未添加微信~",
                  type: "warning",
                  });
            },


            /**
             * 跳转文件系统
             */
            onfile(){
                  if(this.$parent.getScreenWidth()=='电脑'){
                  this.$router.push('/file')
                  }else{
                  return
                  }
            },

            /**
             * 跳转抖音
             */
            ontiktok(){
                  this.$router.push('/tiktok')
            },

            /**
             * 跳转音乐
             */
            onmusic(){
                  this.$router.push('/music')
            },
            /**
             * 跳转管理系统
             */
            onAdmin() {
                  // 发 islogin请求判断是否需要登录

                  // 如果需要登录 则显示输入框

                  // 输入密码 发login请求
                        // 如果密码正确，跳转
                        // 如果错误 ，提示密码错误，并显示还有多少次机会

                  // 如果不需要登录，则直接跳转到admin

                  if(this.$parent.getScreenWidth()=='电脑'){
                  const that=this;
                  this.$axios.get(this.$url+"/api/blog/isLogin").then(function(res){
                        if(res.data.status.code==401){
                              that.$prompt('请输入管理员密码', '提示', {
                              confirmButtonText: '确定',
                              cancelButtonText: '取消',
                              inputType:'password',
                              inputPattern: /^[\w]{8,16}$/,
                              inputErrorMessage: '密码格式不正确'
                              }).then(({ value }) => {
                              that.$root.loading=true;
                              let format = new FormData();
                              format.append("password",value);
                              that.$axios({
                                    method:'post',
                                    url:that.$url+"/api/blog/login",
                                    data:format
                              }).then(function(res){
                                    if(res.data.status.code==401){
                                          that.$root.loading=false;
                                          that.$message.error(res.data.status.message);
                                    }else if(res.data.status.code==403){
                                          that.$root.loading=false;
                                          that.$message({
                                          message: res.data.status.message,
                                          type: 'warning'
                                          });
                                    }else if(res.data.status.code==200){
                                          sessionStorage.setItem('token',res.data.data.token); // 将用户信息存到sessionStorage中
                                          // 登录成功跳转
                                          that.$root.loading=false;
                                          that.$router.push('/admin')
                                    }
                              })
                              }).catch(() => {
                              that.$message({
                                    type: 'info',
                                    message: '取消输入'
                              });       
                              });
                        }else if(res.data.status.code==200){
                              that.$router.push('/admin')
                        }
                  })
                  }else{
                  return
                  }

                  
            },
            /**
             * 留言
             */
            onletter(){
                  const that=this;
                  this.$prompt('需要验证您的邮箱', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                  inputErrorMessage: '邮箱格式不正确',
                  customClass: 'alertClass'
                  }).then((value) => {
                  let format=new FormData();
                  format.append("mail",value.value)
                  that.$axios({
                        method: 'post',
                        url:this.$url+"/message/sendMail",
                        data:format
                  }).then(function (res) {
                        that.$message({
                              type: 'info',
                              message: res.data.status.message,
                        });
                  })

                  }).catch(() => {
                  that.$message({
                        type: 'info',
                        message: '已取消'
                  });       
                  });
            },
            // 获取博文列表
            getBlogList(){
                  const that=this;
                  this.$axios.get(this.$url+'/api/blog/getBlogEntry').then(function (res){
                  that.isBlog=true;
                  
                  that.blogList=res.data.data.entryList;
                  that.blogList.forEach((item) => {
                        var time =  new Date(item.date);
                        var y = time.getFullYear();
                        var m = time.getMonth()+1;
                        var d = time.getDate();
                        item.date= y+'-'+m+'-'+d;
                  })
                  that.blog_loading=false;
                  })
            },
            // 跳转二维码页面
            onQRCode(){
                  this.$router.push("/qrcode");
                  this.$alert('生成的图片将在次日凌晨四点清除，请及时保存!', '提示', {
                        confirmButtonText: '好的',
                        type: 'warning',
                        customClass: 'alertClass'
                  })
            },
            // 跳转Q校园页面
            onQSchool(){
                  this.$router.push("/qschool");
            },
            // 跳转浏览器导航页
            onBrowser(){
                  window.location.href='https://standfast.gitee.io/nav/';
            },
            onColor(){
                  this.$router.push("/color");
            }
      },
      mounted() {
            this.show2=true;

            
            
      }
};
</script>











<style scope lang='less'>
/**禁止选中文字 */
div {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/** 博客上面空白处 */
.grid-content {
    min-height: 28px;
}
.index-top {
    height: 7vh;
}

/** 中间内容 */
.index-middle {
    height: 65vh;
    border-radius: 8px;
}
/* 上方导航栏 */
.index-middle-top {
    font-family: sans-serif;
    font-size: 14px;
    height: 35px;
    border-radius: 25px;
    margin-bottom: 20px;
    box-shadow: 3px 3px 8px #bbc0c0;
    overflow: hidden;
}
.menu-item {
    line-height: 35px;
    cursor: pointer;
}
.menu-item:hover {
    /* inset 是内部阴影 默认是外部阴影outset */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
}
.selecton {
    /* 导航栏被选中样式 */
    color: #409eff;
    font-weight: bold;
}

/* 呈现内容部分 */
.index-middle-buttom {
    border-radius: 8px;
    box-shadow: 3px 3px 8px #bbc0c0;
}
.index-shadow {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: -8px 0 8px white;
    height: 60vh;
    letter-spacing: 2px;
}
.index-public{
    font-size: 14px;
    font-weight: 700;
}

/** 关于 */
.index-about-text{
    padding: 15px;
    text-indent:2em;
    font-size: 12px;
    line-height: 24px;
    text-align: left;
    height: 56vh;
    font-weight: 700;
}
.index-about-text p{
    margin-top: 10px;
}
.index-about-text p .index-about-message{
    cursor: pointer;
    color: #00C4EB;
}
.index-about-span{
    padding-left: 50px;
}

/* 首页上半个背景部分 */
.index-bg {
    /* box-shadow: -3px -2px 8px white; */
    height: 30vh;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-image: url("https://tworice.cn/index-bg.jpg");
}
.index-bg img {
    width: auto;
    height: 45%;
    border-radius: 50%;
    margin-top: 23vh;
}

/* 首页内容的下半部分 */
.index-bg-context {
    height: 30vh;
}
.index-bg-context h3 {
    padding-top: 10vh;

}

/** 联系方法 */
.contact-main {
    height: 12vh;
    display: flex;
    /* 让一行中的元素平均分配宽度 */
    justify-content: space-around;
    align-items: center;
    /* 元素在一行放不下时自动换行 */
    flex-wrap: wrap;
}
.contact-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* 让元素垂直排列 这里就是让包含图片的div和文字垂直排列 */
    flex-direction: column;
    height: 140px;

    padding: 20px 20px;
}
.contact-item p{
      // 站点名称
      font-size: 8px;
      color: slategrey;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp:2;  /* 设置行数 */
      -webkit-box-orient: vertical;

}
.contact-icon {
    /* 鼠标放上去变成小手 */
    cursor: pointer;
    /* 这里让图片在盒子里垂直+水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    /* 圆角属性 */
    border-radius: 20px;
    /* 盒子阴影 */
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
        -18px -18px 30px rgba(255, 255, 255, 1);
    /* 过渡时间 ease-out是指先快速 后慢速 */
    transition: all 0.2s ease-out;
}
.contact-icon:hover {
    /* inset 是内部阴影 默认是外部阴影outset */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
}
.contact-icon:hover img {
    /* inset 是内部阴影 默认是外部阴影outset */
    width: 29px;
}
.contact-img {
    width: 30px;
    transition: all 0.2s ease-out;
}
/**底部 */
.index-bottom{
    padding-top: 5vh;
    font-size: 12px;
}
.index-bottom img{
    width: 12px;
    height: 12px;
}
.index-bottom a{
    color: cadetblue;
}
.index-bottom a:hover{
    color: #46B7F7;
}
.index-bottom p{
    padding: 5px 0;
}

/**博客列表 */
.index-timeline{
    padding: 20px 30px;
    text-align: left;
    // 博客标题
    h4{
        font-size: 0.8rem;
    }
    // 博客作者 时间
    p{
        font-size: 0.6rem;
        color:gray;
    }
}
.index-roll{
    overflow: auto;
}
.index-roll::-webkit-scrollbar{
    width: 6px;
}
.index-roll::-webkit-scrollbar-thumb{
    background-color: #2A9EFF;
    border-radius: 15px;
}


</style>
